<template>
  <el-container class="layout-container-demo" style="height: 92vh">
    <!--  <el-container>-->


    <el-main>
      数据结构
      <el-scrollbar>
        <el-table :data="tableData" class="table">
          <el-table-column prop="Comment" label="评价" width="140"/>
          <!--          <el-table-column prop="Name" label="课程名称" width="140"/>-->
          <!--          <el-table-column prop="Year" label="授课学期" width="120"/>-->
          <!--          <el-table-column prop="Score" label="学分" width="120"/>-->
          <!--          <el-table-column prop="Type" label="课程属性" width="120"/>-->
          <el-table-column prop="Teacher" label=""/>
        </el-table>
      </el-scrollbar>
    </el-main>
    <!--  </el-container>-->
  </el-container>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {Menu as IconMenu, Message, Setting} from '@element-plus/icons-vue'

const item = {
  Comment: '课程好难，但是老师好有耐心啊！',
  Name: '数据结构',
  Year: '2022-2023-1',
  Score: '4学分',
  Type: '必修',
}
const tableData = ref(Array.from({length: 20}).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

/*设置table居中*/
.layout-container-demo .table {
  margin: 0 auto;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  position: absolute;
}
</style>
